import React, { InputHTMLAttributes, ReactElement } from 'react'
import { IconProp } from '@fortawesome/fontawesome-svg-core'
import classNames from 'classnames'
import Icon from '../icon/index'

type Size = 'lg' | 'sm'
export interface InputProps extends Omit<InputHTMLAttributes<HTMLElement>, 'size'> {
    disabled?: boolean,
    size?: Size,
    icon?: IconProp,
    prepend?: string | ReactElement,
    append?: string | ReactElement,
    onchange?: (e: React.ChangeEvent<HTMLInputElement>) => void
}

const Input: React.FC<InputProps> = (props) => {
    const { icon, size, className, disabled, append, prepend, onchange, style, value, ...restProps } = props
    const classes = classNames('viking-input-wrapper', {
        [`input-size-${size}`]: size,
        'is-disabled': disabled,
        'input-group': prepend || append,
        'input-group-append': !!append,
        'input-group-prepend': !!prepend
    })
    return (
        <div className={classes} style={style}>
            {prepend && <div className="viking-input-group-prepend">{prepend}</div>}
            {icon && <div className="icon-wrapper"><Icon icon={icon} title={`title-${icon}`} /></div>}
            <input
                className="viking-input-inner"
                disabled={disabled}
                {...restProps}
                value={value ? value : ''}
            />
            {append && <div className="viking-input-group-append">{append}</div>}
        </div>
    )
}

export default Input